<template>
    <div>
        <!--查询条件-->
        <div id="orderTop">
            手机号码:
            <el-input v-model="searchdata.mobile" class="s_i"></el-input>
            课程名称:
            <el-input v-model="searchdata.coursetitle" class="s_i"></el-input>
            <span class="demonstration">
            支付时间:
            </span>
            <el-date-picker
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    v-model="searchdate"
                    type="daterange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
            >
            </el-date-picker>
            订单状态:
            <el-select v-model="searchdata.status" clearable placeholder="订单状态">
                <el-option
                        v-for="item in orderop"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <br>
            订单编号:
            <el-input v-model="searchdata.orderno" class="s_i"></el-input>
            后台备注:
            <el-input v-model="searchdata.backremarks" class="s_i"></el-input>
            讲师名称:
            <el-input v-model="searchdata.teachername" class="s_i"></el-input>
            购买渠道:
            <el-select v-model="paywhere" clearable placeholder="购买渠道">
                <el-option
                        v-for="item in paywhereop"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            支付方式:
            <el-select v-model="searchdata.paytype" clearable placeholder="支付类型">
                <el-option
                        v-for="item in paywayop"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <br>
            <div style="margin: 30px 0">
                <el-button style="width: 75px;padding: 8px 15px;font-size: 12px" type="primary" icon="el-icon-search"
                           @click="search">搜索
                </el-button>
                <el-button style="width: 75px;padding: 8px 15px;font-size: 12px" type="primary" @click="reset" plain>重置
                </el-button>
            </div>
        </div>
        <!--数据表格-->
        <div>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        type="index"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        label="订单号"
                        width="200">
                    <template slot-scope="scope">
                        <el-button style="border: none;background: none;color: #93defe" type="primary"
                                   @click="searchOrder(scope.row),isorder = true" plain>{{scope.row.orderNo}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="courseTitle"
                        label="课程信息"
                        width="200">
                </el-table-column>
                <el-table-column
                        label="讲师信息"
                        width="130">

                    <template slot-scope="scope">
                        <el-button style="border: none;background: none;color: #93defe" type="primary"
                                   @click="searchTeacher(scope.row),isteacher=true" plain>{{scope.row.teacherName}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        label="用户信息"
                        width="130"
                >
                    <template slot-scope="scope">
                        <el-button style="border: none;background: none;color: #93defe" type="primary"
                                   @click="searchMember(scope.row),ismember=true" plain>{{scope.row.nickname}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        label="交易类型/渠道"
                        width="120">
                    线上支付<br>PC端
                </el-table-column>
                <el-table-column
                        label="支付方式/价格"
                        width="120"
                >
                    <template slot-scope="scope">{{scope.row.payType==1?'微信':'支付宝'}}<br>￥{{scope.row.totalFee}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单状态/时间"
                        width="200">
                    <template slot-scope="scope">{{scope.row.status==1?'已支付':'未支付'}}<br>{{scope.row.payTime}}</template>
                </el-table-column>
                <el-table-column
                        prop="userRemarks"
                        label="客户备注"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="backRemarks"
                        label="后台备注"
                        width="130">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="80">
                    <template slot-scope="scope">
                        <el-button type="success" style="width: 60px;padding: 12px 15px" @click="bz(scope.row)">备注
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--        订单信息弹出层-->
        <div>
            <el-dialog
                    title="订单详情"
                    :visible.sync="isorder"
                    width="750px"
                    @click="isorder=false"
            >
                <div style="background: #f4f4f5;color:#909399;padding: 15px 10px;border-radius: 3px ">订单信息</div>
                <table class="myTable">
                    <tr>
                        <td>用户编号:<span v-if="orderinfo.member!=undefined">{{orderinfo.member.id}}</span></td>
                        <td>注册时间:<span v-if="orderinfo.member!=undefined">{{orderinfo.member.gmtCreate}}</span></td>
                    </tr>
                    <tr>
                        <td>课程名称:<span v-if="orderinfo.order!=undefined">{{orderinfo.order.courseTitle}}</span></td>
                        <td>讲师名称:<span v-if="orderinfo.order!=undefined">{{orderinfo.order.teacherName}}</span></td>
                    </tr>
                    <tr>
                        <td>订单号:<span v-if="orderinfo.paylog!=undefined">{{orderinfo.paylog.orderNo}}</span></td>
                        <td>流水号:<span v-if="orderinfo.paylog!=undefined">{{orderinfo.paylog.transactionId}}</span></td>
                    </tr>
                    <tr>
                        <td>交易类型:<span>线上支付</span></td>
                        <td>支付时间:<span v-if="orderinfo.paylog!=undefined">{{orderinfo.paylog.paytime}}</span></td>
                    </tr>
                    <tr>
                        <td>客户备注:<span v-if="orderinfo.order!=undefined">{{orderinfo.order.userRemarks}}</span></td>
                        <td>后台备注:<span v-if="orderinfo.order!=undefined">{{orderinfo.order.backRemarks}}</span></td>
                    </tr>
                </table>
                <div style="background: #f4f4f5;color:#909399;padding: 15px 10px;border-radius: 3px ">额外信息</div>
                <table class="myTable">
                    <tr>
                        <td>支付方式:<span
                                v-if="orderinfo.order!=undefined">{{orderinfo.order.payType==1?'微信':'支付宝'}}</span></td>
                        <td>购买渠道:<span>PC端</span></td>
                    </tr>
                </table>
            </el-dialog>
        </div>
        <!--        教师信息弹出层-->
        <div>
            <el-dialog
                    title="教师详情"
                    :visible.sync="isteacher"
                    width="845px"
                    @click="isteacher=false"
            >

                <div class="member_div">
                    <el-divider>基础信息</el-divider>
                    <table class="myTable">
                        <tr>
                            <td rowspan="2">头像:
                                <div v-if="teacherinfo.avatar!=undefined">
                                    <el-image style="height: 100px;width: 100px;margin-left: 90px"
                                              :src="teacherinfo.avatar">
                                    </el-image>
                                </div>
                            </td>
                            <td colspan="2">讲师编号:<span v-if="teacherinfo.id!=undefined">{{teacherinfo.id}}</span></td>
                        </tr>
                        <tr>
                            <td>讲师名称:<span v-if="teacherinfo.id!=undefined">{{teacherinfo.name}}</span></td>
                            <td>状态:<span v-if="teacherinfo.status!=undefined">{{teacherinfo.status==0?'正常':(teacherinfo.stauts=1?'冻结':(teacherinfo.stauts=2?'审核未通过':'审核中'))}}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>手机号:<span v-if="teacherinfo.phone!=undefined">{{teacherinfo.phone}}</span></td>
                            <td>邮箱:<span v-if="teacherinfo.email!=undefined">{{teacherinfo.email}}</span></td>
                            <td>职位:<span v-if="teacherinfo.career!=undefined">{{teacherinfo.career}}</span></td>
                        </tr>
                        <tr>
                            <td>注册时间:<span v-if="teacherinfo.gmtCreate!=undefined">{{teacherinfo.gmtCreate}}</span></td>
                            <td colspan="2">排序:<span v-if="teacherinfo.sort!=undefined">{{teacherinfo.sort}}</span></td>
                        </tr>

                    </table>
                </div>
                <div class="member_div">
                    <el-divider>简介</el-divider>
                    <span v-if="teacherinfo.intro!=undefined">{{teacherinfo.intro}}</span>
                </div>
            </el-dialog>
        </div>
        <!--用户信息弹出层-->
        <div>
            <el-dialog
                    title="用户详情"
                    :visible.sync="ismember"
                    width="700px"
                    @click="ismember=false"
            >
                <div class="member_div">
                    <el-divider>基础信息</el-divider>
                    <table class="myTable">
                        <tr>
                            <td v-if="memberinfo!=undefined">用户编号:<span>{{memberinfo.id}}</span></td>
                            <td>用户类型:<span>{{memberinfo.type==0?'用户':'教师'}}</span></td>
                        </tr>
                        <tr>
                            <td>手机号:<span>{{memberinfo.mobile}}</span></td>
                            <td>昵称:<span>{{memberinfo.nickname}}</span></td>
                        </tr>
                        <tr>
                            <td>注册时间:<span>{{memberinfo.gmtCreate}}</span></td>
                            <td>状态:<span>{{memberinfo.isDisabled==0?'正常':'封禁'}}</span></td>
                        </tr>
                    </table>
                </div>
                <div class="member_div">
                    <el-divider>额外详情</el-divider>
                    <table class="myTable">
                        <tr>
                            <td colspan="2" style="height: 120px">用户头像:
                                <div v-if="memberinfo.avatar!=undefined">
                                    <el-image style="height: 100px;width: 100px;margin-left: 90px"
                                              :src="memberinfo.avatar">
                                    </el-image>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>性别:<span>{{memberinfo.sex==1?'女':(memberinfo.sex=2?'男':'保密')}}</span></td>
                            <td>年龄:<span>{{memberinfo.age}}</span></td>
                        </tr>
                        <tr>
                            <td colspan="2">用户签名:<span>{{memberinfo.sign}}</span></td>
                        </tr>
                    </table>
                </div>
            </el-dialog>
        </div>
        <!--分页-->
        <div style="float: right;width: 500px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNo"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "orderBycCass",
        data() {
            return {
                //订单状态下拉选项
                orderop: [
                    {
                        value: 0,
                        label: '待支付'
                    }, {
                        value: 1,
                        label: '已支付'
                    }],
                //支付方式下拉选项
                paywayop: [
                    {
                        value: 1,
                        label: '微信'
                    }, {
                        value: 2,
                        label: '支付宝'
                    }],
                //支付端下拉选项
                paywhereop: [
                    {
                        value: "99",
                        label: 'PC端'
                    }
                ],
                //支付端model
                paywhere: '',
                //查询日期
                searchdate: [],
                //查询对象
                searchdata: {},
                //第几页
                pageNo: 1,
                //总条数
                total: 30,
                //每页几条
                pagesize: 5,
                //表格内容
                tableData: [],
                //订单数据
                orderinfo: [],
                //订单数据弹出
                isorder: false,
                //教师数据
                teacherinfo: [],
                //教师数据弹出
                isteacher: false,
                //用户数据
                memberinfo: [],
                //用户数据弹出
                ismember: false,

            };
        },
        methods: {
            handleSizeChange(val) {
                this.pagesize = val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.initTable();
            },
            //搜索
            search() {
                if (this.searchdata != null) {
                    this.searchdata.startOrderTime = this.searchdate[0];
                    this.searchdata.endOrderTime = this.searchdate[1];
                }
                this.initTable();
            },
            //初始化表格
            initTable() {
                var that = this;
                this.$http.post(`/order/list/${that.pageNo}/${that.pagesize}`, that.searchdata).then(function (success) {
                    that.tableData = success.data.result.records;
                    that.total = success.data.result.total;
                })
            },
            //重置表格
            reset() {
                this.searchdata = {};
            },
            //备注
            bz(row) {
                console.log(row.backRemarks)
                var that = this;
                this.$prompt('备注信息', '备注', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: row.backRemarks
                }).then(({value}) => {
                    row.backRemarks = value;
                    that.$http.post(`/order/upBackRemarks`, row).then(function (success) {
                        if (success.data.code = 200) {
                            that.$message.success("备注成功")
                        } else {
                            that.$message.info("备注失败")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消备注'
                    });
                });
            },
            //查询用户
            searchMember(row) {
                var that = this;
                this.$http.get(`/order/getMemberInfo/${row.mobile}`).then(function (success) {
                    that.memberinfo = success.data.result;
                })
            },
            //查询教师
            searchTeacher(row) {
                var that = this;
                this.$http.get(`/order/getTeacherInfo/${row.teacherName}`).then(function (success) {
                    console.log(success)
                    that.teacherinfo = success.data.result;
                })
            },
            //查询流水号
            searchOrder(row) {
                var that = this;
                this.$http.post(`/order/getOrderInfo`, row).then(function (success) {
                    that.orderinfo = success.data.result;
                })
            }
        },
        created() {
            this.initTable();
        }
    }
</script>

<style scoped>
    .s_i {
        width: 160px;
        padding: 0 10px;
        height: 30px;
    }

    .myTable > tr {
        width: 700px;
    }

    .myTable > tr > td {
        width: 350px;
        height: 62px;
        font-weight: 700;
        font-size: 14px;
        font-family: Arial;
    }

    .myTable > tr > td > span {
        margin-left: 20px;
    }

    .member_div {
        margin: 20px 20px 20px 0;
        border: 1px solid ghostwhite;
        border-radius: 2px;
        box-shadow: lightgray 2px 2px 5px 2px;
    }
</style>